<template>
	<div class="navbar">
		<van-row type="flex">
			<van-col span="3">
				<div class="rollback" @click="rollbackBtn">
					<van-image width="0.18rem" height="0.34rem" :src="require('../assets/imgs/arrowsLeftBlack.png')">
					</van-image>
				</div>
			</van-col>
			<van-col span="12" offset='3'>
				<div class="nabar-title">
					<div class=" limit-one-line">{{title}}</div>
				</div>
			</van-col>
			<van-col span="3">
				<div v-if="isShowCollect" class="collect">
					<van-image width="0.4rem" height="0.4rem"
						:src="require('../assets/imgs/collect-'+(isCollect?'yes':'no')+'.png')">
					</van-image>
				</div>
			</van-col>
			<van-col span="3">
				<div v-if="isShowShare" class="share">
					<van-image width="0.36rem" height="0.36rem" :src="require('../assets/imgs/share-icon2.png')">
					</van-image>
				</div>
			</van-col>
		</van-row>
	</div>
</template>

<script scoped>
	export default {
		name: 'Rollback',
		props: {
			back: {
				type: Number,
				default: 1
			},
			title: {
				type: String,
				default: ''
			},
			isShowCollect: {
				type: Boolean,
				default: false
			},
			isCollect: {
				type: Boolean,
				default: false
			},
			isShowShare: {
				type: Boolean,
				default: false
			},
			rollback: {
				type: Function,
				default: (that) => {
					that.$router.back(-that.back);
				}
			}
		},
		methods: {
			rollbackBtn() {
				this.rollback(this)
			}
		}
	}
</script>

<style scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 0.88rem;
		text-align: center;
		background-color: #FFFFFF;
	}

	.rollback,
	.collect,
	.nabar-title,
	.share {
		height: 0.88rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rollback {}

	.nabar-title {}

	.collect {}

	.share {}
</style>
